from dash import html
import dash_bootstrap_components as dbc
import json
from .. import navi
from dash import Dash, html, Input, Output, callback
def Comment(Cdata):
    return html.Div([
        dbc.Row([
            dbc.Col([
                html.P(Cdata['comment'],className='text-secondary')
            ],width=8),
            dbc.Col([
                html.Span(Cdata['date'].strip(),className='text-secondary',style={'margin-right':'10px','width':'30%'}),
                html.Span('点赞数  '+ Cdata['votes'],className='text-secondary',style={'margin-left':'10px','width':'30%'})
            ],width=4)
        ])
    ],className='my-3',style={'border':'1px solid #ccc','border-radius':'5px','padding':'10px'})
def searchBox():
    return html.Div([
        dbc.Row([
            dbc.Col([
                dbc.Input(id='searchInput',placeholder='请输入关键字筛选',style={'width':'100%'})
            ],style={'margin-right':'10px','width':'70%'}),
            dbc.Col([
                dbc.Button('搜索',id='searchButton',color='primary',style={'width':'100%'})
            ],style={'width':'20%'})
        ],className='my-3',style={'width':'100%','display':'flex','justify-content':'center','align-items':'center'})
    ])

@callback(
    Output('comments','children'),
    Input('searchButton','n_clicks'),
    Input('searchInput','value')
)
def searchComments(n_clicks,value):
    with open('src/data/MoviewComments.json','r',encoding='utf-8') as f:
        comments = json.load(f)
    if n_clicks is None:
        return [Comment(comment) for comment in comments]
    if value is None or value == '':
        return  [Comment(comment) for comment in comments]
    return [Comment(comment) for comment in comments if value in comment['comment']]

## use callback to change the comments after search
def Comments():
    return html.Div([
        navi.navigator(),
        searchBox(),
        html.Div(id='comments',style={'width':'100%'})
    ],style={'margin':'20px'})